<script setup lang="ts">
import { dayjs } from 'wot-design-uni'
import api from '@/api'
import { useUserStore } from '@/store'

const props = defineProps<{
  classInfo: (Awaited<ReturnType<typeof api.classes.getClassInfoByClassId>>['data']
    & Awaited<ReturnType<typeof api.classes.getClassesByCurrentUser>>['data'][number])
}>()

const userStore = useUserStore()

const data = reactive<{
  assignmentInfos: Awaited<ReturnType<typeof api.assignments.getAssignmentsByClassId>>['data'][number][]
}>({
  assignmentInfos: [],
})

const isCreator = computed(() => userStore?.userInfo?.id !== void 0 && userStore?.userInfo?.id !== null && props.classInfo?.creatorId !== void 0 && props.classInfo?.creatorId !== null && userStore?.userInfo?.id === `${props.classInfo?.creatorId}`)

watch(() => props.classInfo, ({ id }) =>
  void api.assignments
    .getAssignmentsByClassId(id)
    .then((resp) => {
      if (resp.code === 0) {
        data.assignmentInfos = resp.data
      }
      else {
        uni.showToast({
          title: resp.msg,
          duration: 2000,
          icon: 'error',
        })
      }
    }), { immediate: true })

function onCreateAssignmentBtnClick() {
  uni.navigateTo({
    url: `/pages-sub/admin/assignment/create-assignment?multiClass=true&defaultClassId=${props.classInfo.id}`,
  })
}

function onAssignmentCardClick(assignmentId: number) {
  uni.navigateTo({
    url: `/pages-sub/admin/assignment/class-assignment-details?assignmentId=${assignmentId}`,
  })
}
</script>

<template>
  <view class="homework-container">
    <view v-show="isCreator" class="create-button-container">
      <wd-button size="large" class="create-button" @click="onCreateAssignmentBtnClick()">
        创建作业
      </wd-button>
    </view>
    <view v-if="data.assignmentInfos.length === 0" style="text-align: center; color: #ccc;">
      <text>暂无作业……</text>
    </view>
    <view v-for="item in data.assignmentInfos" v-else :key="item.id" class="homework-card" @click="onAssignmentCardClick(item.id)">
      <view class="homework-card__icon">
        <span class="icon-placeholder">📝</span>
      </view>
      <view class="homework-card__info">
        <view class="homework-card__title-status">
          <view class="homework-card__title">
            {{ ((date: Date) => `${date.getMonth() + 1}月${date.getDate()}日`)(new Date(item.createTime)) }}
          </view>
          <view class="homework-card__status">
            {{ item.completedCount < item.totalMembers ? "未完成" : "已完成" }}
          </view>
        </view>
        <view class="homework-card__meta">
          <span class="homework-card__publish-time">{{
            dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss")
          }}发布</span>
          <span class="homework-card__deadline">截止：{{ dayjs(item.assignmentDate).format("MM-DD") }}</span>
          <span class="homework-card__completion">{{ `${item.completedCount}/${item.totalMembers}` }} 已完成</span>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import '@/styles/variables.scss';

.homework-container {
  .create-button-container {
    text-align: center;
    margin-bottom: $grid-margin;

    .create-button {
      background: linear-gradient(to right, #1c7ce3, #4db5ce);
      width: 100%;
    }
  }

  .homework-card {
    display: flex; /* 使用 Flex 布局，使图标和信息区水平排列 */
    align-items: center; /* 垂直居中对齐子项 */
    background-color: #fff; /* 卡片背景色 */
    border-radius: 8px; /* 卡片圆角 */
    padding: 15px; /* 卡片内边距 */
    box-shadow: $shadow-md; /* 轻微阴影，增加立体感 */
    margin-bottom: 10px; /* 卡片之间的垂直间距 */
    max-width: 400px; /* 示例宽度，根据需要调整 */
    box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
  }

  .homework-card__icon {
    flex-shrink: 0; /* 防止图标区域被压缩 */
    width: 40px; /* 图标容器宽度 */
    height: 40px; /* 图标容器高度 */
    border-radius: 6px; /* 图标背景的圆角 */
    background-color: #007bff; /* 图标背景色，示例中为蓝色 */
    color: #fff; /* 图标颜色（如果图标是文字或字体图标） */
    font-size: 20px; /* 图标字体大小 */
    display: flex;
    justify-content: center; /* 水平居中图标 */
    align-items: center; /* 垂直居中图标 */
    margin-right: 15px; /* 图标和右侧信息区域的间距 */
  }

  /* 如果你的图标是图片（<img>标签），需要调整其样式 */
  .homework-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持图片比例并适应容器 */
    border-radius: 6px; /* 如果图片也需要圆角 */
  }

  /* 如果你的图标是像 `wd-icon` 这样的组件，确保其颜色和大小在组件层面或通过外部CSS设置 */
  .homework-card__icon .wd-icon {
    color: #fff; /* 例如设置 Wot UI 图标的颜色 */
  }

  .homework-card__info {
    flex: 1; /* 占据剩余的所有可用空间 */
    min-width: 0; /* 防止内容过长时溢出 */
  }

  .homework-card__title-status {
    display: flex; /* 使标题和状态标签水平排列 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 5px; /* 标题行和下方元信息行之间的间距 */
    flex-wrap: wrap; /* 如果空间不足，允许换行 */
  }

  .homework-card__title {
    font-size: 16px; /* 标题字体大小 */
    font-weight: bold; /* 标题加粗 */
    color: #333; /* 标题颜色 */
    margin-right: 10px; /* 标题和状态标签的间距 */
    line-height: 1.2; /* 调整行高 */
    /* min-width: 0; /* 确保标题在空间不足时可以收缩 */
  }

  .homework-card__status {
    background-color: #ffc107; /* 状态标签背景色（黄色，如图所示的“未完成”） */
    color: #fff; /* 状态标签文字颜色 */
    font-size: 12px; /* 状态标签文字大小 */
    padding: 3px 8px; /* 状态标签内边距 */
    border-radius: 4px; /* 状态标签圆角 */
    flex-shrink: 0; /* 防止状态标签被压缩 */
  }

  /* 针对“已完成”状态的示例样式 */
  .homework-card__status.completed {
    background-color: #28a745; /* 绿色 */
  }

  .homework-card__meta {
    display: flex; /* 使发布时间、截止日期和完成情况水平排列 */
    justify-content: space-between; /* 使元素分布在整行 */
    align-items: center; /* 垂直居中对齐 */
    font-size: 12px; /* 元信息字体大小 */
    color: #666; /* 元信息颜色 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 8px; /* 元素之间的间距 */
  }

  .homework-card__deadline {
    color: #ff6b6b; /* 截止日期使用红色突出显示 */
    font-weight: 500; /* 稍微加粗 */
  }
}
</style>
